<template>

    <div style="padding: 20px">

        <a-row :gutter="20">
            <a-col :span="24">
                <a-button type="primary" @click="newDatabase">
                    <template #icon>
                        <icon-plus/>
                    </template>
                    新建数据库
                </a-button>
            </a-col>
        </a-row>

        <a-list style="width: 100%;margin-top: 10px">
            <a-list-item v-for="database in databaseList">
                <a-row>
                    <a-col :span="12">
                        <a-link @click="selectDatabase(database)">{{ database }}</a-link>
                    </a-col>
                    <a-col :span="12" style="text-align: right;">
                        <a-space>
                            <a-button size="small" @click="showCreateSql(database)">建库语句</a-button>
                            <a-button size="small" @click="showInfo(database)">配置参数</a-button>
                            <a-button size="small" status="danger" @click="deleteDatabase(database)" :disabled="systemDatabase.indexOf(database)>=0">
                                删除
                            </a-button>
                        </a-space>
                    </a-col>
                </a-row>

            </a-list-item>
        </a-list>

    </div>


    <database-modal ref="databaseModal" @done="getDatabaseList"></database-modal>
    <database-info-modal ref="databaseInfoModal"></database-info-modal>

</template>

<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import {changeDatabase, doQuery} from "../../scripts/mapper";
import {QueryResult} from "../../scripts/type";
import {Message, Modal} from "@arco-design/web-vue";
import {useRouter} from "vue-router";
import DatabaseModal from "./modal/DatabaseModal.vue";
import DatabaseInfoModal from "./modal/DatabaseInfoModal.vue";

const router = useRouter()
let databaseList:any[] = reactive([])

let systemDatabase = ['information_schema', 'performance_schema'];

onMounted(() => {
    getDatabaseList()
})

const databaseModal = ref()
const databaseInfoModal = ref()

const getDatabaseList = () => {
    databaseList.splice(0, databaseList.length)
    doQuery("SHOW DATABASES;").then((queryResult: QueryResult) => {
        if (queryResult.success && queryResult.data) {
            queryResult.data.forEach(item => databaseList.push(item[0]))
        } else {
            Message.error("查询数据库失败" + (queryResult.message ? (": " + queryResult.message) : ""))
        }
    })
}


const newDatabase = () => {
    databaseModal.value.add()
}

const deleteDatabase = (database) => {
    Modal.warning({
        simple: true,
        hideCancel: false,
        title: '删除数据库',
        content: '确定要删除数据库' + database + '吗?',
        onOk: () => {
            doQuery("DROP DATABASE IF EXISTS " + database + ";").then((queryResult: QueryResult) => {
                if (queryResult.success && queryResult.data) {
                    Message.success(database + " 已删除");
                    getDatabaseList();
                } else {
                    Message.error("删除失败" + (queryResult.message ? (": " + queryResult.message) : ""))
                }
            })
        }
    })
}

const selectDatabase = (database) => {
    changeDatabase(database).then((changeSuccess) => {
        if (changeSuccess) {
            router.push({path: '/database/query'})
        }
    });
}

const showCreateSql = (database) => {
    doQuery("SHOW CREATE DATABASE " + database + ";").then((queryResult: QueryResult) => {
        if (queryResult.success && queryResult.data) {
            Modal.open({
                title: queryResult.data[0][0] + ' 建库语句',
                content: String(queryResult.data[0][1]),
                footer:false
            });
        } else {
            Message.error("建库语句查询失败" + (queryResult.message ? (": " + queryResult.message) : ""))
        }
    })
}

const showInfo = (database) => {
    databaseInfoModal.value.show(database)
}


</script>

<style scoped>

</style>
